<template>
	<view class="">
		<view class="touD">
			<!-- {{headList}}headList -->
			<view v-for="(item,index) in headList" :key="index">
				<view :class="index==0?'usr-img':'usr-img-one'">
					<image class="usr_img_1" :src="item" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["headList"],
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.usr-img {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 50%;
		margin-right: -30rpx;

		.usr_img_1 {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
		}
	}

	.usr-img-one {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 50%;
		margin-right: -30rpx;

		.usr_img_1 {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
		}
	}

	.touD {

		display: flex;
		flex-wrap: wrap;

		width: 100%;
		margin: 0px auto;

	}
</style>